<template>
    <view class="add-house-con">
        <!-- 房屋信息区域 -->
        <view class="info-section">
            <view class="section-header">
                <view class="section-icon house-icon">
                    <!-- 房屋图标 -->
                    <image class="section-icon-img" :src="IMAGE_URL + '/static/mine/title-icon.png'" mode="aspectFit"></image>
                </view>
                <text class="section-title">房屋信息</text>
            </view>
            
            <view class="form-item">
                <text class="label">所属小区</text>
                <view class="input-wrapper">
                    <input 
                        class="input-field" 
                        placeholder="请选择小区" 
                        v-model="formData.community"
                        @click="selectCommunity"
                    />
                    <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                </view>
            </view>
            
            <view class="form-item">
                <text class="label">所属房屋</text>
                <view class="input-wrapper">
                    <input 
                        class="input-field" 
                        placeholder="请选择房屋" 
                        v-model="formData.house"
                        @click="selectHouse"
                    />
                    <u-icon name="arrow-right" color="#999" size="24rpx"></u-icon>
                </view>
            </view>
            
            <view class="form-item">
                <text class="label">所属身份</text>
                <view class="radio-group">
                    <u-radio-group v-model="formData.identity" placement="row">
                        <u-radio 
                            class="radio-item"
                            name="owner" 
                            label="业主"
                            activeColor="#4A90E2"
                            size="30rpx"
                        ></u-radio>
                        <u-radio 
                            class="radio-item"
                            name="family" 
                            label="家庭成员"
                            activeColor="#4A90E2"
                            size="30rpx"
                        ></u-radio>
                        <u-radio 
                            class="radio-item"
                            name="tenant" 
                            label="租客"
                            activeColor="#4A90E2"
                            size="30rpx"
                        ></u-radio>
                    </u-radio-group>
                </view>
            </view>
        </view>

        <!-- 个人信息区域 -->
        <view class="info-section">
            <view class="section-header">
                <view class="section-icon person-icon">
                    <!-- 个人信息图标 -->
                    <image class="section-icon-img" :src="IMAGE_URL + '/static/mine/title-icon.png'" mode="aspectFit"></image>
                </view>
                <text class="section-title">个人信息</text>
            </view>
            
            <view class="form-item">
                <text class="label">姓名</text>
                <view class="input-wrapper">
                    <input 
                        class="input-field" 
                        placeholder="请输入真实姓名" 
                        v-model="formData.name"
                    />
                </view>
            </view>
            
            <view class="form-item">
                <text class="label">手机号</text>
                <view class="input-wrapper">
                    <input 
                        class="input-field" 
                        placeholder="请输入手机号码" 
                        v-model="formData.phone"
                        type="number"
                    />
                </view>
            </view>
        </view>


        <!-- 提交按钮 -->
        <view class="submit-btn" @click="submitForm">
            <text class="submit-text">提交</text>
        </view>

        <!-- 小区选择器 -->
        <u-picker 
            :show="showCommunityPicker" 
            :columns="[communityList]"
            @confirm="onCommunityChange"
            @cancel="showCommunityPicker = false"
            @close="showCommunityPicker = false"
            title="选择小区"
            :closeOnClickOverlay="true"
        ></u-picker>

        <!-- 房屋选择器 -->
        <u-picker 
            :show="showHousePicker" 
            :columns="[houseList]"
            @confirm="onHouseChange"
            @cancel="showHousePicker = false"
            @close="showHousePicker = false"
            title="选择房屋"
            :closeOnClickOverlay="true"
        ></u-picker>
    </view>
</template>

<script>
import appConfig from '@/config/app.js'
export default {
    data() {
        return {
            IMAGE_URL: appConfig.IMAGE_URL,
            formData: {
                community: '',
                house: '',
                identity: 'family', // 默认选择家庭成员
                name: '',
                phone: ''
            },
            // Mock数据 - 简单字符串数组
            communityList: [
                '雄安新区第一社区',
                '雄安新区第二社区',
                '雄安新区第三社区',
                '雄安新区第四社区',
                '雄安新区第五社区'
            ],
            houseList: [
                '1号楼1单元101',
                '1号楼1单元102',
                '1号楼2单元201',
                '2号楼1单元101',
                '2号楼1单元102',
                '3号楼1单元301'
            ],
            showCommunityPicker: false,
            showHousePicker: false,
            communityIndex: 0,
            houseIndex: 0
        }
    },
    methods: {
        selectCommunity() {
            console.log('打开小区选择器，数据:', this.communityList)
            this.showCommunityPicker = true
        },
        selectHouse() {
            console.log('打开房屋选择器，数据:', this.houseList)
            this.showHousePicker = true
        },
        onCommunityChange(e) {
            console.log('小区选择事件:', e)
            // 根据控制台显示，uView picker返回的格式是 {indexs: Array(1), value: Array(1), values: Array(1)}
            let index = null
            
            if (e && e.indexs && Array.isArray(e.indexs) && e.indexs.length > 0) {
                index = e.indexs[0]
            } else if (e && e.value && Array.isArray(e.value) && e.value.length > 0) {
                index = e.value[0]
            } else if (e && e.values && Array.isArray(e.values) && e.values.length > 0) {
                index = e.values[0]
            } else if (e && e.detail && e.detail.value && Array.isArray(e.detail.value)) {
                index = e.detail.value[0]
            } else if (typeof e === 'number') {
                index = e
            }
            
            console.log('解析到的索引:', index)
            
            if (index !== null && index >= 0 && index < this.communityList.length) {
                this.formData.community = this.communityList[index]
                this.showCommunityPicker = false
                console.log('选择的小区:', this.formData.community)
            } else {
                console.error('无法获取有效的选择索引:', e)
            }
        },
        onHouseChange(e) {
            console.log('房屋选择事件:', e)
            // 根据控制台显示，uView picker返回的格式是 {indexs: Array(1), value: Array(1), values: Array(1)}
            let index = null
            
            if (e && e.indexs && Array.isArray(e.indexs) && e.indexs.length > 0) {
                index = e.indexs[0]
            } else if (e && e.value && Array.isArray(e.value) && e.value.length > 0) {
                index = e.value[0]
            } else if (e && e.values && Array.isArray(e.values) && e.values.length > 0) {
                index = e.values[0]
            } else if (e && e.detail && e.detail.value && Array.isArray(e.detail.value)) {
                index = e.detail.value[0]
            } else if (typeof e === 'number') {
                index = e
            }
            
            console.log('解析到的索引:', index)
            
            if (index !== null && index >= 0 && index < this.houseList.length) {
                this.formData.house = this.houseList[index]
                this.showHousePicker = false
                console.log('选择的房屋:', this.formData.house)
            } else {
                console.error('无法获取有效的选择索引:', e)
            }
        },
        submitForm() {
            // 表单验证
            if (!this.formData.community) {
                uni.showToast({
                    title: '请选择小区',
                    icon: 'none'
                })
                return
            }
            if (!this.formData.house) {
                uni.showToast({
                    title: '请选择房屋',
                    icon: 'none'
                })
                return
            }
            if (!this.formData.name) {
                uni.showToast({
                    title: '请输入姓名',
                    icon: 'none'
                })
                return
            }
            if (!this.formData.phone) {
                uni.showToast({
                    title: '请输入手机号',
                    icon: 'none'
                })
                return
            }
            
            // 提交逻辑
            console.log('提交表单:', this.formData)
            uni.showToast({
                title: '提交成功',
                icon: 'success'
            })
        }
    }
}
</script>
<style lang="scss" scoped>
.add-house-con {
    width: 100%;
    min-height: 100vh;
    background: #f6f6f6;
    padding: 20rpx 32rpx;
    box-sizing: border-box;
}

.info-section {
    background: #ffffff;
    border-radius: 16rpx;
    margin-bottom: 20rpx;
    padding: 40rpx 28rpx 0;
    box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
}

.section-header {
    display: flex;
    align-items: center;
}

.section-icon {
    width: 32rpx;
    height: 32rpx;
    margin-right: 16rpx;
    border-radius: 50%;
}

.house-icon {
    width: 33rpx;
    height: 24rpx;
}

.person-icon {
    width: 33rpx;
    height: 24rpx;
}

.section-icon-img {
    width: 33rpx;
    height: 24rpx;
}

.section-title {
    font-size: 32rpx;
    font-weight: 600;
    color: #333333;
}

.form-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 40rpx 0;
    border-bottom: 1rpx solid #f0f0f0;
    
    &:last-child {
        border-bottom: none;
    }
}

.label {
    font-size: 28rpx;
    color: #333333;
    font-weight: 500;
    min-width: 140rpx;
    flex-shrink: 0;
}

.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1;
}

.input-field {
    flex: 1;
    background: transparent;
    border: none;
    padding: 0 24rpx;
    font-size: 28rpx;
    color: #333333;
    text-align: right;
    box-sizing: border-box;
    min-height: 40rpx;
    line-height: 40rpx;
    
    &::placeholder {
        color: #999999;
        text-align: right;
    }
    
    &:focus {
        outline: none;
    }
}

.radio-group {
    flex: 1;
    display: flex;
    justify-content: flex-end;
}
.radio-item {
    margin-left: 40rpx;
}

.submit-btn {
    margin-top: 100rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 80rpx;
    background: linear-gradient( 90deg, #0785CF 0%, #25A4EF 100%);
    box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(7,133,207,0.1);
    border-radius: 60rpx 60rpx 60rpx 60rpx;
}

.submit-text {
    color: #ffffff;
    font-size: 32rpx;
    font-weight: 600;
}

/* 为底部按钮留出空间 */
.add-house-con {
    padding-bottom: 120rpx;
}
</style>